<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="img/sd.png">
<title>Fendli_街灯</title>
<style type="text/css">
	html,body{
		height:100%;
		width: 100%;
		padding: 0px;
		margin: 0px;
		background-image: url("img/beijing.png");
		}
	::-webkit-scrollbar{
		background-color: #fff;
		width: 0px;
	}
	::-webkit-scrollbar-thumb{
		background-color: #000;
	}
	#body{
		background-color: #FFFFFF;
		margin: 0;
		padding: 0;
	}
	::-webkit-scrollbar{
		background-color: #fff;
		width: 0px;
	}
	::-webkit-scrollbar-thumb{
		background-color: #000;
	}
	.a{
		text-decoration:none;
		color: #000;
		width: 100%;
		text-align: center;
	}
	.a:hover{
		text-decoration:none;
		color: #fff;
		width: 100%;
		text-align: center;
	}
	.back{
		width: 60px;
		height: 100%;
		padding: 0px;
		margin: 0px;
	}
	.back:hover{
		background-color: #00214f;
		width: 60px;
		height: 100%;
		padding: 0px;
		margin: 0px;
	}
	.p{
		font-weight:bolder;
		font-size: 15px;
		height: 100%;
		padding-top: 10px;
		margin: 0px;
	}
	.img{
		height: 40px;
		padding: 0px;
		margin: 0px 0px 0px 5px;
	}
	#buttoncolor{
		border:2px solid #fff;
	}
	#buttoncolor:hover{
		border:2px solid red;
	}
</style>
</head>
<body id="body">
	<div style="width: 100%;background-color:#fff;display: flex;height: 40px;box-shadow: 0px 0px 5px #888888;">
		<img style="height:35px;padding:2.5px 10px 0px 10px;" src="./img/标题2.png" />
		<div style="display: flex;margin: 0px 5px 0px 5px;width: 100%;padding: 0px;">
			<div class="back"><a class="a" href="./PCmain.html" target="超链接"><p class="p">首页</p></a></div>
			<div class="back"><a class="a" href="./main.html" target="超链接"><p class="p">关于</p></a></div>
		</div>
	</div>
	<center>
	  <div style='height: auto;width: 700px;margin:25px 0px 0px 0px;background-color: #ffffff;padding: 5px 0px 15px 0px;text-align: left;box-shadow: 0px 0px 3px #888888;border-radius: 10px;'>
		<div style='text-align: left;display: flex;padding: 0px 15px 0px 15px;margin:20px 0px 0px 0px;height: 80px;'>
		  <div style='margin: 0px 0px 0px 10px;width:80%;'>
			<p style='height: 40px;margin: 0px;padding: 0px;color: #000000;font-size:33px;font-weight:bold;font-family: 微软雅黑;'>生存天数</p>
			<p class="donghua" style='text-align: center;margin:5px 0px 0px 0px;padding: 1px 3px 1px 3px;color: #ffffff;font-size:10px;font-weight:bold;font-family: 微软雅黑;background-color: #00214f;width:200px;border-radius: 10px;padding:5px;'>https://gitee.com/street-lamp-jiedeng</p>
		  </div>
		  <div style='margin: 0px 0px 0px 10px;width: 20%'>
			<p id="result" style='height: 40px;margin: 0px;padding: 13px 10px 0px 0px;color: #808080;font-size:40px;font-weight:bold;font-family: 微软雅黑;'>NULL</p>
            <script>
               // 核心计算函数
               function calculateDaysAlive(birthDate) {
                 const birth = new Date(birthDate);
                 const now = new Date();
                 // 时区校准：将时间统一到同一天的00:00:00 UTC
                 const utcBirth = Date.UTC(birth.getFullYear(), birth.getMonth(), birth.getDate());
                 const utcNow = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate());
                 // 计算毫秒差并转换为天数
                 const diff = utcNow - utcBirth;
                 return Math.floor(diff / (1000 * 60 * 60 * 24));
               }
               // 页面交互逻辑
               function updateDays() {
	             //出生日期
                 const birthDate = "2003-01-27";
                 const days = calculateDaysAlive(birthDate);
                 document.getElementById('result').textContent = days;
               }
               // 默认加载时自动计算
               updateDays();
            </script>
		  </div>
		</div>
	  </div>
	</center>
	<iframe src="./PCmain.html" name="超链接" style="width: 100%;height: 100%;border-width:0px;margin-top: 5px;"></iframe>
</body>
</html>
